<template>
  <div class="container">
    <!-- 面包屑导航 -->
        <breadcrumb :breadcrumbConfig = breadcrumbConfig></breadcrumb>

    <!-- 面包屑导航 teamManage -->

    <div class="contentDetails">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div class="title titleblue">售后详情</div>

      </div>
    </div>
    <div class="contentDetails">
      <div class="box">
        <Steps :stepInfo="afterSaleNode" :status="afterSaleNode" @stepStatus = 'stepClick'></Steps>
      </div>
    </div>
    <div class="contentDetails" style="display: flex; justify-content: space-between">
      <div>
        <div style="display: flex; align-items: center" v-if='afterSaleNode.closeStatus!=1'>
          <img
            :src="afterSaleMessage.subsetStatus==8?statusImg.open:statusImg.close"
            style="margin-right: 8px"
          /><span  class="boldSize" >
            {{(afterSaleMessage.subsetStatus==1?'退款中':'')||
              (afterSaleMessage.subsetStatus==2?'等待客户寄回':'')||
              (afterSaleMessage.subsetStatus==3?'客户已寄回':'')||
              (afterSaleMessage.subsetStatus==4?'等待寄出换货':'')||
              (afterSaleMessage.subsetStatus==5?'换货已寄出':'')||
              (afterSaleMessage.subsetStatus==8?'售后完成':'')
            }}
            </span>
        </div>
        <div style="display: flex; align-items: center" v-if='afterSaleNode.closeStatus==1'>
           <img
            :src="afterSaleMessage.subsetStatus==8?statusImg.open:statusImg.close" style="margin-right: 8px"/>
            <span style="font-size: 18px;  font-weight: bold">
              {{afterSaleNode.closeStatus==1?'售后关闭':''}}
            </span>
        </div>
          <div style=" margin-top: 10px;"  class="approver" v-if="afterSaleMessage.subsetStatus==1">
             请及时跟进！
          </div>
          <!-- 售后完成时间 -->
           <div v-if="afterSaleMessage.subsetStatus==8" style=" margin-top: 10px;"  class="approver">
             时间：{{afterSaleMessage.finishedTime?afterSaleMessage.finishedTime:'-'}}
          </div>

          <!-- 售后关闭时间 -->
           <div v-if="afterSaleMessage.subsetStatus==6||afterSaleMessage.subsetStatus==7" style=" margin-top: 10px;"  class="approver">
             时间：{{afterSaleMessage.finishedTime?afterSaleMessage.finishedTime:'-'}}
          </div>
            <div v-if="afterSaleMessage.subsetStatus==2||afterSaleMessage.subsetStatus==3||afterSaleMessage.subsetStatus==4||afterSaleMessage.subsetStatus==5" class="approver"  style=" margin-top: 20px;">
              收货信息
            </div>

            <span v-if="afterSaleMessage.afterSaleMessage==2||afterSaleMessage.subsetStatus==3||afterSaleMessage.subsetStatus==4||afterSaleMessage.subsetStatus==5||afterSaleMessage.subsetStatus==6||afterSaleMessage.subsetStatus==7" class="size14" style="font-weight: 400; color: #4c81eb; margin-top: 10px; display: inline-block;">
              {{
              afterSaleMessage.subsetStatus==2?'收货方式':''||
              afterSaleMessage.subsetStatus==4?'等待寄出换货':''||
              (afterSaleMessage.subsetStatus==3||afterSaleMessage.subsetStatus==5?'运输中':'')||
              (afterSaleMessage.subsetStatus==6||afterSaleMessage.subsetStatus==7?'关闭原因':'')
              }}
            </span>
             <span v-if="afterSaleMessage.subsetStatus==2||afterSaleMessage.subsetStatus==4" class="size14" style=" margin-left:20px;margin-top: 8px;font-weight: 400;color: #999999;display: inline-block;">
              <span>使用物流配送</span>
            </span>
            <!-- 退货 -->
            <span v-if="afterSaleMessage.subsetStatus==3" class="size14" style=" margin-top: 8px;margin-left:20px;font-weight: 400;color: #999999;">
              <span>{{salesReturn.expTextName}}</span
              ><span style="margin-left: 5px">{{salesReturn.mailNo?salesReturn.mailNo:'-'}}</span>
            </span>
            <!-- 换货 -->
             <span v-if="afterSaleMessage.subsetStatus==5" class="size14" style=" margin-top: 8px;margin-left:20px;font-weight: 400;color: #999999;">
              <span>{{exchangeGoodsList.expTextName}}</span
              ><span style="margin-left: 5px">{{exchangeGoodsList.mailNo?exchangeGoodsList.mailNo:'-'}}</span>
            </span>
            <!-- 关闭原因 -->
             <span v-if="afterSaleMessage.subsetStatus==6||afterSaleMessage.subsetStatus==7" class="size14" style=" margin-top: 8px;margin-left:20px;font-weight: 400;color: #999999;">
              <span>{{afterSaleMessage.closeReason?afterSaleMessage.closeReason:'-'}}</span>
            </span>

      </div>
      <div class="logisticsBtn">
        <el-button  type="primary" size="medium" @click="examine" plain
          >查看物流</el-button
        >
        <!--  v-if="afterSaleMessage.subsetStatus==3||afterSaleMessage.subsetStatus==5"-->
        <el-button v-if="afterSaleMessage.subsetStatus==4" type="primary" size="medium" @click="sendOff" plain
          >寄出换货</el-button
        >
        <el-button v-if="afterSaleMessage.subsetStatus==2&&orderMessage.sysUserId==userId" type="primary" size="medium" @click="sendBack" plain
          >商品寄回</el-button
        >
      </div>
    </div>
     <!-- 订单信息 -->
       <!-- 订单信息 -->
      <div class="contentDetails">
        <div class="title">订单信息</div>
          <div class="order_details">
            <div class="order_details_box">
               <div class="order_details_item"><span class="order_details_title">订单号</span><span class="order_details_value">{{orderMessage.orderNo?orderMessage.orderNo:'-'}}</span></div>
               <div class="order_details_item"><span class="order_details_title">关联订单号</span><span class="order_details_value">{{orderMessage.platformOrderNo?orderMessage.platformOrderNo:'-'}}</span></div>
            </div>
            <div class="blankBox"></div>
             <div class="order_details_box">
                <div class="order_details_item"><span class="order_details_title">订单类型</span><span class="order_details_value">{{orderMessage.orderTypeLabel?orderMessage.orderTypeLabel:'-'}}</span></div>
                <div class="order_details_item"><span class="order_details_title">入线时间</span><span class="order_details_value">{{orderMessage.ditchTime?orderMessage.ditchTime:'-'}}</span></div>
             </div>
            <div class="blankBox"></div>
             <div class="order_details_box">
                <div class="order_details_item"><span class="order_details_title">支付方式</span><span class="order_details_value">{{orderMessage.payTypeCN?orderMessage.payTypeCN:'-'}}</span></div>
                 <div class="order_details_item"><span class="order_details_title">跟进客服</span><span class="order_details_value">{{orderMessage.follower?orderMessage.follower:'-'}}</span></div>
             </div>
            <div class="blankBox"></div>
             <div class="order_details_box">
                <div class="order_details_item"><span class="order_details_title">平台</span><span class="order_details_value">{{orderMessage.platformName?orderMessage.platformName:'-'}}</span></div>
                <div class="order_details_item"><span class="order_details_title">部门</span><span class="order_details_value">{{orderMessage.orgName?orderMessage.orgName:"-"}}</span></div>
              </div>
            <div class="blankBox"></div>
             <div class="order_details_box">
                <div class="order_details_item"><span class="order_details_title">来源渠道</span><span class="order_details_value">{{orderMessage.userDitch?orderMessage.userDitch:'-'}}</span></div>
                <div class="order_details_item"><span class="order_details_title">订单分类</span><span class="order_details_value">{{orderMessage.orderGenerateTypeLabel?orderMessage.orderGenerateTypeLabel:'-'}}</span></div>

              </div>
              <!-- <div class="details_item"><span class="details_title">店铺</span><span class="details_value">{{orderMessage.shopName?orderMessage.shopName:'-'}}</span></div> -->
              <!-- <div class="details_item"><span class="details_title">店铺ID</span><span class="details_value">{{orderMessage.shopId?orderMessage.shopId:'-'}}</span></div> -->
              <!-- <div class="details_item"><span class="details_title">达人ID</span><span class="details_value">{{orderMessage.talentShowId?orderMessage.talentShowId:'-'}}</span></div> -->
              <!-- <div class="details_item"><span class="details_title">达人昵称</span><span class="details_value">{{orderMessage.talentShowName?orderMessage.talentShowName:'-'}}</span></div> -->
          </div>
        <div class="remarkMessage">
          <div class="remarkMessage_remark">
            <div class="remarkMessage_remark_item">
              <span class="fourteenTitle">备注信息</span>
              <span class="fourteenDetails" >{{orderMessage.remarks?orderMessage.remarks:'暂无备注 '}}</span>
            </div>
         </div>
        </div>
      </div>

      <!-- 购买信息 -->
          <div class="contentDetails">
        <div class="title">购买信息</div>
          <div class="contentDetails_box">
            <div class="contentDetails_item">
              <div class="title_too">收货信息</div>
              <div class="details" >
                  <div class="details_item"><span class="details_title fourteen">收货人</span><span class="details_value fourteen">{{buyMessage.postName?buyMessage.postName:'-'}}</span></div>
                  <div class="details_item"><span class="details_title fourteen">联系方式</span><span class="details_value fourteen">{{buyMessage.postContact?buyMessage.postContact:'-'}}</span></div>
                  <div class="details_item addressWidth"><span class="details_title fourteen">收货地址</span><span class="details_value fourteen">{{buyMessage.postProvinceCode + buyMessage.postCityCode + buyMessage.postDetailedAddress}}</span></div>
                </div>
            </div>
            <div class="borderWire"></div>
            <div class="contentDetails_item">
                <div class="title_too">买家信息</div>
                <div class="details" >
                    <div class="details_item"><span class="details_title fourteen">客户姓名</span><span class="details_value fourteen">{{buyMessage.userName?buyMessage.userName:'-'}}</span></div>
                    <div class="details_item"><span class="details_title fourteen">客户电话</span><span class="details_value fourteen">{{buyMessage.userPhone?buyMessage.userPhone:'-'}}</span></div>
                    <div class="details_item"><span class="details_title fourteen">客户意向</span><span class="details_value fourteen">{{buyMessage.userIntentionLabel?buyMessage.userIntentionLabel:'-'}}</span></div>
                    <div class="details_item"><span class="details_title fourteen">买家留言</span><span class="details_value fourteen">{{buyMessage.userRemarks?buyMessage.userRemarks:'-'}}</span></div>
                </div>
            </div>
          </div>
        </div>
    <div class="contentDetails">
      <div class="titleBtn">
        <div class="title" style="margin-bottom: 20px">商品信息</div>
      </div>
        <el-table :data="goodsList" :header-cell-style="{background: '#fafafa',color:'#333333'}" class="goodsMessage">
          <el-table-column
            prop="updatedTime"
            label="商品信息"
            headerAlign="left" >
            <template slot-scope="props">
                <div style="text-align: left">
                  <p><span>{{ props.row.goodsName?props.row.goodsName:'-' }}</span><span v-if="props.row.goodsType==3"  class="gift">赠品</span></p>
                  <p>{{props.row.goodsSkuName?props.row.goodsSkuName:'-'}}</p>
                  <p><span style="padding-right:10px">商品编码</span>{{ props.row.goodsSkuNo ?props.row.goodsSkuNo :'-'}}</p>
                 <p><span style="padding-right:10px">商家编码</span>{{ props.row.merchantCode?props.row.merchantCode:'-' }}</p>
                  <!-- <p><span style="padding-right:10px">商家编码</span> -</p> -->
                </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="authListStr"
            label="单价/数量"
            header-align="right"
            >
             <template slot-scope="props">
                <div style="text-align: right">
                  <p>￥&nbsp;{{ props.row.unitPrice }}</p>
                  <p>×&nbsp;{{ props.row.quantity }}</p>
                </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="authListStr"
            label="小计"
            header-align="right">
             <template slot-scope="props">
                <div style="text-align: right">
                  ￥&nbsp;{{ Number((props.row.quantity*props.row.unitPrice)-props.row.discountAmount) }}
                </div>
            </template>
          </el-table-column>
           <el-table-column
            prop="authListStr"
            label="优惠信息"
            header-align="right">
             <template slot-scope="props">
                <div style="text-align: right">
                  <span class="platform">平台优惠：</span><span class="platformMoney">￥{{props.row.discountAmount}}</span>
                </div>
            </template>
          </el-table-column>
        </el-table>
      <div class="total_prices">
            <span style="color: #666666; margin-right: 15px">商品总价：￥{{afterSaleMessage.productTotalAmalgam}}</span>
            <span style="color: #666666; margin-right: 15px">运费：￥0</span><!-- 暂时咩有 -->
            <span style="color: red; margin-right: 15px">优惠：￥0</span><!-- 暂时咩有 -->
            <span style="color: #444; margin-right: 15px">应付：￥{{afterSaleMessage.receivableAmount}}</span>
            <span style="color: #6190ed;margin-right: 15px">（实付：￥{{afterSaleMessage.receivedAmount}}）</span>
            <span style="color: red">退款金额：￥{{afterSaleMessage.refundAmount}}</span>
      </div>
      <div class="afterSaleBox">
        <div class="afterSaleBox_item">
        <div class="afterSaleBox_title">售后信息</div>

        </div>
        <div class="afterSaleBox_item">
          <div class="message">
            <p><span>退款编号:</span><span class="message_value">{{afterSaleMessage.afterNo}}</span></p>
            <p><span>售后原因:</span><span class="message_value">{{afterSaleMessage.refundCause}}</span></p>
            <p><span>售后说明:</span><span class="message_value">{{this.afterSaleMessage.refundReason?this.afterSaleMessage.refundReason:'-'}}</span></p>
            <!-- <p><span>物流部备注:</span><span class="message_value">{{afterSaleMessage.refundReason }}</span></p> -->
          </div>
          <div class="imgbox">
              <span class="imgbox_title">图片：</span>
              <el-image v-for="(item,index) in afterSaleMessage.imageListen" :key="index" :preview-src-list='afterSaleMessage.imageListen' class="img_item" :src="item" lazy></el-image>

          </div>
        </div>
        <div class="tuikuan" >
          <span class="tuikuan_status">{{type=='accomplish'?'退款成功':''||type=='afterSaleclose'?'退款失败':''}}</span>
          <span class="money">退款金额:￥{{afterSaleMessage.refundAmount}}</span>
      </div>
      </div>

    </div>
    <div class="botton_btn" >
      <div v-if="(approveStatus||afterSaleMessage.subsetStatus==1)&&parArray.indexOf('afterAuditCode') != -1&&this.auditState==true">
          <el-button  class="whiteBtn" type="primary" @click="handlerAudit" plain >审核</el-button>
      </div>
      <div v-if="afterSaleMessage.subsetStatus!=6&&afterSaleMessage.subsetStatus!=7&&afterSaleMessage.subsetStatus!=8&&orderMessage.sysUserId==userId&&parArray.indexOf('disqualificationCode') != -1">
          <el-button  type="primary" @click="cancelAfterSale" style="width: 120px;height: 36px;line-height: 0;">取消售后</el-button>
      </div>
    </div>

    <el-dialog
      :append-to-body="true"
      :title="dialog.title"
      :visible.sync="dialog.visible"
      :width="dialog.width"
      :before-close="handleClose"
    >
      <template  v-if="dialog.type =='logisticsInformation'">
            <StepLogistics :stepProgress="afterSaleMessage.subsetStatus==3?salesReturn:exchangeGoodsList"></StepLogistics>
            <!-- <StepLogistics :stepProgress="exchangeGoodsList"></StepLogistics> -->
      </template>
       <template  v-if="dialog.type =='logisticsInformationTwo'">
            <StepLogistics :stepProgress="stepClickType==3?salesReturn:exchangeGoodsList"></StepLogistics>
            <!-- <StepLogistics :stepProgress="exchangeGoodsList"></StepLogistics> -->
      </template>
      <template v-if="dialog.type=='addRemark'">
        <el-form label-width="50px">
          <el-form-item label="备注">
            <el-input type="textarea" placeholder="请输入内容" v-model="remark">
            </el-input>
          </el-form-item>
        </el-form>
         <div class="dialogBtn">

          <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>

    </div>
      </template>

      <template v-if="dialog.type == 'audit'">
              <div class="audit_title">是否审核通过？</div>
                  <el-radio-group v-model="shenhe" >
                    <el-radio  label="2">通过</el-radio>
                    <el-radio  label="3">不通过</el-radio>
                  </el-radio-group>
                  <div v-if="shenhe==3">
                       <el-form label-width="40px" class="audit_textarea" >
                          <el-form-item label="原因">
                            <el-input placeholder="请输入原因"  maxlength="200" show-word-limit  type="textarea" v-model="cause"></el-input>
                          </el-form-item>
                        </el-form>
                  </div>

                  <div class="dialogBtnright" style="margin-top:20px">
                      <el-button class="setPay_payment_btn_quxiao" @click="handleClose">取 消</el-button>
                      <el-button class="setPay_payment_btn_queren" type="primary" @click="confirmSelectPay">确 定</el-button>
                  </div>
          <!-- <audit-operation ref="shenhe" :shenheId="afterSaleId"  @submitState="shenheState" ></audit-operation> -->
          <!-- <div class="dialogBtnright" style="margin-top:20px">
               <el-button class="setPay_payment_btn_quxiao" @click="closeDialog">取 消</el-button>
              <el-button class="setPay_payment_btn_queren" type="primary" @click="actionDialog">确 定</el-button>
          </div> -->
       </template>
      <template v-if="dialog.type=='exchangeGoods'||dialog.type=='modifyOrderNoOneTui'">
         <modify-order-no :afterId="routeQuery.id" :type="dialog.type" ref="modifyOrderNo" @submitState="modifyState"></modify-order-no>
         <div class="dialogBtnright" style="margin-top:20px">
                      <el-button class="setPay_payment_btn_quxiao" @click="closeDialog">取 消</el-button>
                      <el-button class="setPay_payment_btn_queren" type="primary" @click="actionDialog">确 定</el-button>
                  </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import Steps from '@/components/shouhou-steps.vue'
import breadcrumb from '@/components/breadcrumb'
import VerticalSteps from '@/components/vertical-steps.vue'
import mixinsCommon from '../mixins/common'
import AuditOperation from '@/components/AuditOperation'
import modifyOrderNo from '../components/modifyOrderNo'
import StepLogistics from '../components/StepLogistics'
export default {
  mixins: [mixinsCommon],
  name: 'afterSaleDetails',
  components: {
    Steps,
    breadcrumb,
    VerticalSteps,
    modifyOrderNo,
    AuditOperation,
    StepLogistics

  },
  data () {
    return {
      userId: '', //
      approveStatus: '', // 审核页面跳转传参
      stepClickType: '',
      exchangeGoodsList: {}, // 换货物流数据
      salesReturn: {}, // 退货物流数据
      afterStatus: '', // 订单状态
      LogisticsType: '', // 退货换货类型：1->退货；2->换货；
      disabledType: '', // 是否禁用取消售后按钮
      exchange: '', // 换货物流
      logisticsMessage: '', // 物流信息
      buyMessage: '', // 购买信息
      orderMessage: '', // 订单信息
      afterSaleNode: {}, // 状态节点
      afterSaleMessage: '', // 售后退款信息
      goodsList: [], // 商品列表数据
      afterSaleId: '', // 售后订单ID
      cause: '',
      routeQuery: {}, // 路由参数

      shenhe: '2', // 审核
      statusImg: {
        close: require('../../../assets/icon_guanbi.png'),
        open: require('../../../assets/icon_wanc.png')
      },

      breadcrumbConfig: {
        list: [
          {
            title: '订单管理',
            type: '#ff0000',
            path: '/'
          },
          {
            title: '售后订单',
            type: '0',
            path: 'afterSale/ordeList'
          },
          {
            title: '售后详情',
            type: '1',
            path: ''
          }

        ]
      },
      remark: '',
      activeNum: 2,
      roleForm: {
        name: ''
      },
      page: {
        pageNo: 1,
        pageSize: 10,
        totalNum: 0,
        currentPage: 1
      },
      parArray: [],
      reallyName: '',
      auditState: false
    }
  },
  watch: {
    afterStatus (val, oldVal) {
      if (val == 3) {
        this.LogisticsType = 1
        this.selectReturn() // 订单状态物流信息
      } else if (val == 5) {
        this.LogisticsType = 2
        this.selectExchangeGoods() // 订单状态物流信息
      }
    }
  },
  created () {
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem('limit'))
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === 'logisticsOrderList'
    )
    if (params.length > 0) {
      params[0].buttonList.forEach((item) => {
        this.parArray.push(item.code)
      })
    }
    // this.afterSaleId = this.$route.query.id
    this.userId = JSON.parse(sessionStorage.getItem('user_id'))
    this.reallyName = JSON.parse(sessionStorage.getItem('userInfo')).reallyName

    this.routeQuery = this.$route.query
    // this.fetchData()
    this.type = this.$route.query.type
    this.approveStatus = this.$route.query.approveStatus
    // （状态节点）订单状态信息查询
    this.getAfterOrderStatus()
    // 售后订单状态退款信息查询
    this.getRefund()
    // 售后订单商品信息查询
    this.getDetail()
    this.getOrderDetail()// 订单信息
    this.getBuyInfo()// 购买信息
    this.getHistory()// 审核进度
  },
  methods: {
    // 查询审批进度
    getHistory () {
      this.axios
        .post('/neworder/process/task/getHistory', {
          busId: this.routeQuery.afterNo,
          funcCode: '2',
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          if (res.code === 0) {
            const shenheName = res.data.records[res.data.records.length - 1].userName
            if (shenheName.indexOf(this.reallyName) >= 0) {
              this.auditState = true
            } else {
              this.auditState = false
            }
          } else {
            this.auditState = false
          }
        })
    },
    // 审核
    confirmSelectPay () {
      if (this.shenhe == 3 && this.cause == '') {
        return this.$message.warning('请填写不通过原因！')
      }
      const data = {
        afterNos: [this.afterSaleMessage.afterNo],
        resultFlag: this.shenhe,
        reason: this.cause
      }
      this.$api.afterSaleDoApprove(data).then((res) => {
        if (res.code == 0) {
          this.$message.success('操作成功！')
          this.getAfterOrderStatus()
          this.getRefund()
          this.dialog.visible = false
        }
      }).catch(err => { console.log(err) })
    },
    stepClick (e) {
      if (e == 3) {
        this.salesReturn = {} // 退货物流数据
        this.exchangeGoodsList = {} // 换货物流数据
        this.dialog.title = '查看物流'
        this.dialog.type = 'logisticsInformationTwo'
        this.dialog.width = '948px'
        this.dialog.visible = true
        this.selectReturn()
        this.stepClickType = 3
      } else if (e == 5) {
        this.salesReturn = {} // 退货物流数据
        this.exchangeGoodsList = {} // 换货物流数据
        this.dialog.title = '查看物流'
        this.dialog.type = 'logisticsInformationTwo'
        this.dialog.width = '948px'
        this.dialog.visible = true
        this.selectExchangeGoods()
        this.stepClickType = 5
      }
    },
    // 审核，提交状态
    shenheState (state) {
      // 提交后，关闭并还原值
      this.closeDialog()
    },

    // 关闭退货 换货弹框
    modifyState (status, type) {
      if (type == 2) {
        this.disabledType = true
      }

      this.closeDialog()
      this.getAfterOrderStatus()
      this.getRefund()
    },
    // 寄出换货
    sendOff () {
      this.dialog.title = '寄出换货'
      this.dialog.type = 'exchangeGoods'
      this.dialog.visible = true
      this.dialog.width = '500px'
    },
    // 商品寄回
    sendBack () {
      this.dialog.title = '商品寄回'
      this.dialog.type = 'modifyOrderNoOneTui' // 换货不需要传值，显示组件使用，不作为值参使用
      this.dialog.visible = true
      this.dialog.width = '500px'
    },
    // （状态节点）订单状态信息查询
    getAfterOrderStatus () {
      const data = {
        id: this.routeQuery.id
      }
      this.$api.getAfterOrderStatusById(data).then((res) => {
        if (res.code == 0) {
          this.afterSaleNode = res.data
        }
      }).catch(err => { console.log(err) })
    },
    // 售后订单状态退款信息查询
    getRefund () {
      const data = {
        id: this.routeQuery.id
      }
      this.$api.getRefundById(data).then((res) => {
        if (res.code == 0) {
          if (this.dictionaries.after_sale_status.length !== 0) {
            res.data.typeStatus = this.dictionaries.after_sale_status.find(e => { return e.dictId == res.data.status }).dictName
            res.data.refundCause = this.dictionaries.after_sale_reason.find(e => { return e.dictId == res.data.afterSaleReason }).dictName
          }
          this.afterSaleMessage = res.data
          this.afterStatus = this.afterSaleMessage.status
        }
      }).catch(err => { console.log(err) })
    },
    // 售后订单状态物流信息查询
    getLogistics () {
      const data = {
        id: this.routeQuery.id
        // typeFlag: this.LogisticsType
      }
      this.$api.getLogisticsByAfterId(data).then((res) => {
        if (res.code == 0) {
          if (this.dictionaries.courier_company.length !== 0) {
            res.data.wuliuCn = this.dictionaries.courier_company.find(e => { return e.dictId == res.data.logisticsCompany }).dictName
          }
          this.logisticsMessage = res.data
        }
      }).catch(err => { console.log(err) })
    },
    // 查看换货物流信息
    selectExchangeGoods () {
      const data = {
        id: this.routeQuery.id
      }
      this.$api.selectExchangeGoodsById(data).then((res) => {
        if (res.code == 0) {
          res.data.data.map(item => {
            item.year = item.time.split(' ')[0]
            item.dataTime = item.time.split(' ')[1]
          })
          this.exchangeGoodsList = res.data
        }
      }).catch(err => { console.log(err) })
    },
    // 查看退货物流信息
    selectReturn () {
      const data = {
        id: this.routeQuery.id
      }
      this.$api.selectReturnById(data).then((res) => {
        if (res.code == 0) {
          res.data.data.map(item => {
            item.year = item.time.split(' ')[0]
            item.dataTime = item.time.split(' ')[1]
          })
          this.salesReturn = res.data
        }
      }).catch(err => { console.log(err) })
    },
    // 售后订单商品信息查询
    getDetail () {
      const data = {
        id: this.routeQuery.id
      }
      this.$api.getDetailById(data).then((res) => {
        if (res.code == 0) {
          this.goodsList = res.data
        }
      }).catch(err => { console.log(err) })
    },

    // 取消售后
    cancelAfterSale () {
      this.$confirm('是否撤回该售后审核？撤回后会取消审核', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = { afterNo: this.routeQuery.afterNo }
        this.$api.afterDoCancel(params).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getAfterOrderStatus()
            this.getRefund()
          }
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {

      })
    },
    // 获取订单信息
    getOrderDetail () {
      const data = {
        id: this.routeQuery.orderId
      }
      this.$api.getOrderDetail(data).then(res => {
        if (res.code == 0) {
          if (this.dictionaries.order_pay_type.length !== 0) {
            res.data.payTypeCN = this.dictionaries.order_pay_type.find(e => { return e.dictId == res.data.payType }).dictName
          }
          this.orderMessage = res.data
        }
      })
    },
    // 获取订单购买信息
    getBuyInfo () {
      const data = {
        id: this.routeQuery.orderId
      }
      this.$api.getBuyInfo(data).then(res => {
        if (res.code == 0) {
          this.buyMessage = res.data
        }
      })
    },
    // 审核按钮
    handlerAudit () {
      this.shenhe = ''
      this.cause = ''
      this.dialog.type = 'audit'
      this.dialog.visible = true
      this.dialog.title = '审核'
      this.dialog.width = '600px'
    },
    // 添加备注确定按钮
    confirm () {

    },
    handleClose () {
      this.dialog.visible = false
    },
    // 查看物流按钮
    examine () {
      this.salesReturn = {} // 退货物流数据
      this.exchangeGoodsList = {} // 换货物流数据
      this.dialog.title = '查看物流'
      this.dialog.type = 'logisticsInformation'
      this.dialog.width = '948px'
      this.dialog.visible = true
      if (this.afterSaleMessage.subsetStatus == 3) { // 退货
        this.selectReturn()
      } else if (this.afterSaleMessage.subsetStatus == 5) { // 换货
        this.selectExchangeGoods()
      }
      // else {
      //   this.getlogistics()
      // }
      // this.selectReturn()
      // this.selectExchangeGoods()
    },
    // 物流信息
    getlogistics () {
      const data = {
        id: this.routeQuery.id,
        logisticsType: 2
      }
      this.$api.getLogisticsInfo(data).then(res => {
        if (res.code == 0) {
          res.data.data.map(item => {
            item.year = item.time.split(' ')[0]
            item.dataTime = item.time.split(' ')[1]
          })
          this.exchangeGoodsList = res.data
        }
      })
    },
    // 添加备注按钮
    addRemarkBtn () {
      this.dialog.title = '添加备注'
      this.dialog.type = 'addRemark'
      this.dialog.width = '30%'

      this.dialog.visible = true
    },
    // 修改地址
    editLocation () {
      this.dialog.title = '修改收货地址'
      this.dialog.type = 'editLoacation'
      this.dialog.width = '50%'
      this.dialog.visible = true
    }

  }
}
</script>

<style scoped lang="scss">
.logisticsBtn{
  padding-top:55px;
}
.boldSize{
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}
.boldSize16{
  font-size: 18px;
  font-weight: 400;
  color: #333333;
}
.size14{
  font-size: 16px;
  font-weight: 400;
  color: #666666;
}

@media screen and (max-width:1280px){
   .borderWire{
    width: 1px;
    background-color: #EDEDED;
    margin-top: 4.5% !important;
}
  .logisticsBtn{
  padding-top:3% !important;
}
.boldSize{
  font-size: 18px !important;
  font-weight: bold;
  color: #333333;
}
.boldSize16{
  font-size: 16px !important;
  font-weight: 400;
  color: #333333;
}
.approver{
  margin-top: 10px ;
   font-size: 16px !important;
   font-weight: 400
}
.size14{
  font-size: 14px !important;
  font-weight: 400;
  color: #666666;
}
.imgbox{
  margin-top: 10px;
     .img_item{
        width: 72px !important;
        height: 72px !important;
        padding-right: 10px;
        vertical-align: top;
      }
    }

.contentDetails {
  margin-bottom: 20px;
  padding: 16px 20px !important;
  background-color: #ffffff;
  box-sizing: border-box;
  .box {
    padding: 0px 20px !important;
    background: #f5f8ff;
    box-sizing: border-box;
    padding-left: 25px;

  }
   .contentDetails_item{
    width: 50%;
    height: auto;
    text-align: left;
  }

  .afterSales{
    width: 120px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid #F33F3F;
    opacity: 1;
    border-radius: 4px;
    line-height: 0;
    color: #F33F3F;
  }
 .addressWidth{
      width: 560px !important;
    }
  .details {
   display: flex;
    flex-wrap:wrap;
  margin-top: 10px;
  .details_box{

  }
    .details_item{
      margin-right: 30px;
      width: auto !important;
      line-height: 40px;
     .details_title{
       width: 85px !important;
      font-size: 14px !important;
      font-weight: 400;
      line-height: 0px;
      color: #999999;
      text-align: right;
      display: inline-block;
    }

    .details_value{
      font-size: 14px !important  ;
      font-weight: 400;
      line-height: 0px;
      color: #666666;
      padding-left:12px;
    }
    }

  }

  .remarkMessage{
    margin-top: 18px;
    .remarkMessage_remark{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .fourteenTitle_buymessage{
      margin-left: 28px !important;
    }
    .remarkMessage_remark_item{
      width: 50%;
      display: flex;
      align-items: center;
      margin-right: 10px;

    }
     .fourteenTitle{
      width: 62px;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
    }
      .fourteenDetails {
      width: 78%;
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      padding-bottom: 0;
      background-color: #F5F8FF;
      margin-left: 10px;
      margin-right: 10px;

      padding-left: 10px;

  }

  }
  .title {
    font-size: 16px !important;
    font-weight: 400;

  }

  .title_too{
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin-top: 18px;
    padding-left: 28px !important;
  }
  .titleblue{
    display: flex;
    align-items: center;
     &:before {
          display: inline-block;
          content: '';
          width: 4px;
          height: 16px;
          background-color: #2d7edf;
          margin-right: 10px;
        }
  }
  .titleBtn{
    display:flex;
    justify-content: space-between;
  }

}
}

.contentDetails {
  margin-bottom: 20px;
  padding: 16px 20px;
  background-color: #ffffff;
  box-sizing: border-box;
 .borderWire{
    width: 1px;
    background-color: #EDEDED;
    margin-top: 0%;
    margin-left: 8%;
    margin-right: 2%;
}
 .contentDetails_box{
    display: flex;
    justify-content: left;

  .details {
   display: flex;
    flex-wrap:wrap;
  margin-top: 10px;
    // margin-right: 250px;

  .contentDetails_item{
    display: flex;
  }
    .details_item{
      min-width: 100px;
      line-height: 40px;
     .details_title{
       width: 82px;
      text-align: right;
      font-size: 16px;
      font-weight: 400;
      line-height: 0px;
      color: #999999;
      display: inline-block;

    }
    .details_value{
      font-size: 16px;
      font-weight: 400;
      line-height: 0px;
      color: #666666;
      padding-left:12px;
    }
    }
    }

  }
   .addressWidth{
      // width: 560px !important;
    }

.order_details {
    display: flex;
    justify-content: left;
    flex-wrap:wrap;
    margin-top: 10px;
 .blankBox{
      width: 3%;
    }
      // min-width: 255px;
      line-height: 40px;
     .order_details_title{
      width: 82px;
      font-size: 14px;
      font-weight: 400;
      line-height: 0px;
      color: #999999;
      text-align: right;
      display: inline-block;
    }

    .order_details_value{
      font-size: 14px;
      font-weight: 400;
      line-height: 0px;
      color: #666666;
      padding-left:12px;
    }
    }

  }
  .remarkMessage{
    margin-top: 18px;
    .remarkMessage_remark{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
     .remarkMessage_remark_item{
      width: 50%;
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
    .fourteenTitle{
        font-size: 14px;
        font-weight: bold;
        color: #333333;
    }
    .fourteenDetails {
      width: 78%;
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      padding-bottom: 0;
      background-color: #F5F8FF;
      margin-left: 10px;
      margin-right: 10px;

      padding-left: 10px;

  }
  }
  .title {
    font-size: 16px;
    font-weight: 400;

  }

  .title_too{
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin-top: 18px;
    padding-left: 25px;

  }
  .titleblue{
    display: flex;
    align-items: center;
     &:before {
          display: inline-block;
          content: '';
          width: 4px;
          height: 16px;
          background-color: #2d7edf;
          margin-right: 10px;
        }
  }
.titleBtn{
  display:flex;
  justify-content: space-between;
}
  .box {
    padding: 0px 39px;
    background: #f5f8ff;
    box-sizing: border-box;
  }

.fourteenTitle {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.fourteenDetails {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  padding-bottom: 20px;

}

.red{
  color: red;
}
.total_prices{
  margin-top: 24px;
  display: flex;
  justify-content: right;
  font-size: 14px;

}
.botton_btn{
  padding:10px 20px 20px 20px ;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialogBtn{
  display: flex;
  justify-content: right;
  margin-top: 28px;
}

.afterSaleBox{
  border-top: 1px solid #EDEDED;
  margin-top: 10px;
  padding:20px 20px 0px 20px;
  .afterSaleBox_title{
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }
  .afterSaleBox_item{
    display: flex;
    justify-content: space-between;
    .message{
       font-size: 14px;
      font-weight: 400;
      color: #666666;
      p{
        padding-top: 8px;
      }
      .message_value{
        padding-left: 10px;
      }

    }
    .imgbox{
      .imgbox_title{
        padding-right: 10px;
      }
      .img_item{
        width: 88px;
        height: 88px;
        padding-right: 10px;
        vertical-align: top;
      }
    }
  }
}
.tuikuan{
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: right;
  margin-top: 10px;
  .tuikuan_status{
    color: #F33F3F;
    padding-right: 20px;
  }
  .money{
    color: #F33F3F;

  }
}
.fourteen{
    font-size: 14px !important;
  }
  .dialogBtnright{
  display: flex;
  justify-content: right ;
}
 .setPay_payment_btn_quxiao{
    width: 120px;
    height: 36px;
    border: 1px solid #D9D9D9;
    opacity: 1;
    border-radius: 4px;
    line-height: 0;
  }
  .setPay_payment_btn_queren{
    width: 120px;
    height: 36px;
    background: #4168E7;
    opacity: 1;
    border-radius: 4px;
    line-height: 0;
    border: 0;
  }
  .audit_textarea{
    margin-top: 10px;
    /deep/.el-textarea__inner{
      margin-top: 13px;
      height: 132px;
    }
  }
   .audit_title{
    font-weight: bold;
    margin-bottom: 20px;font-size: 16px;
  }

.whiteBtn{
  width: 120px;
  height: 36px;
  background: #FFFFFF;
  border: 1px solid #4168E7;
  opacity: 1;
  border-radius: 4px;
  line-height: 0;
  color: #4168E7;
}
/deep/.el-table th > .cell{
  text-align: unset     ;
  font-size: 16px;
}
.goodsMessage{
  .gift{
    display: inline-block;
    text-align: center;
    width: 54px;
    height: 24px;
    background: #feebeb;
    border-radius: 4px;
    margin-left: 25px;
    font-size: 14px;
    font-weight: 400;
    color: #F33F3F ;
    line-height: 23px;
    box-sizing: border-box;
  }
}
.platform{
    font-size: 16px;
    font-weight: 400;
    color: #333333;
}
.platformMoney{
  font-size: 16px;
  font-weight: 400;
  color: #F33F3F;
}
</style>
